<template>
    <div class="container-box">
        <div style="height: 98px;"></div>
        <!-- serch -->
        <div class="bgfffs filter_box" :style="contentStyleObj">
            <page-filter :className="className" :provinceAndCityData="provinceAndCityData_" lableWidth="70px" ref="from"
                :query.sync="filterInfo.query" :filter-list="filterInfo.list" :list-type-info="listTypeInfo"
                @handleClick="handleClick" @handleEvent="handleEvent" @upenter="upenter">
            </page-filter>
        </div>

        <div class="bgfff" ref="tableWrapper">
            <div style="padding: 10px 10px">
                <page-table :checkBox="false" ref="table" :tabIndex="true" :dataText="dataText" v-loading="loading"
                    :init-curpage="tableInfo.initCurpage" :data.sync="tableInfo.data" :pageParm="pageParm"
                    :query="filterInfo.query" :field-list="tableInfo.fieldList" :list-type-info="listTypeInfo"
                    :handle="tableInfo.handle" :showSummary="showSummary" :getSummaries="getSummaries"
                    @handleClick="handleClick" @handleEvent="handleEvent">
                    <!-- <template v-slot:col-identity_type="scope">
                        <span v-if="scope.row.identity_type == 0">-</span>
                        <span v-else-if="scope.row.identity_type == 1">个体</span>
                        <span v-else>企业</span>
                    </template> -->
                    <template v-slot:col-state="scope">
                        <span v-if="scope.row.state == 30">已认证</span>
                        <span v-else-if="scope.row.state == 20">待认证</span>
                        <span v-else>未认证</span>
                    </template>
                    <template v-slot:col-order_amount="scope">
                        <span v-if="scope.row.order_amount === '0'">-</span>
                        <span v-else>{{ scope.row.order_amount }}</span>
                    </template>
                    <template v-slot:col-account_period="scope">
                        <span>{{ scope.row.account_period }}天</span>
                    </template>
                    <template v-slot:col-road_line="scope">
                        <!-- <span v-if="scope.row.road_line === ''">-</span>
                        <span>{{ scope.row.road_line }}</span> -->
                        <div slot="reference" class="soltInfos" style="cursor: pointer;color: #409eff;"
                            @click="rodeDetail(scope.row)">
                            <div v-if="scope.row.road_line" class="soltInfo">{{ scope.row.road_line }}</div>
                            <i style="flex: 1;" class="el-icon-s-order"></i>
                        </div>
                    </template>


                </page-table>
            </div>
        </div>
        <page-dialog :class="{ 'dialogCss': dialogInfo.type == 'person' }" :title="dialogInfo.title[dialogInfo.type]"
            :visible.sync="dialogInfo.visible" :width="dialogInfo.width" :bt-loading="dialogInfo.btLoading"
            :bt-list="is_edit ? dialogInfo.btList : (someCondition ? dialogInfo.btList3 : dialogInfo.btList2)"
            shutEvent="close" @handleClick="handleClick" @handleEvent="handleEvent">
            <template v-slot>
                <!-- 个人认证 -->
                <div v-if="dialogInfo.type == 'person'">
                    <el-form label-position="right" :inline="false" :rules="rules" :model="personForm" ref="personForm"
                        label-width="110px">
                        <div style="display: flex;">
                            <div style="width: 70%;">
                                <el-form-item label="姓名：">
                                    {{ personForm.real_name }}
                                </el-form-item>
                                <el-form-item label="手机号：">
                                    {{ personForm.phone }}
                                </el-form-item>
                                <el-form-item label="身份证号：">
                                    {{ personForm.citizen_cardid }}
                                </el-form-item>
                                <el-form-item label="车牌号：">
                                    {{ personForm.car_number }}
                                </el-form-item>
                            </div>
                            <div style="width: 30%;">
                                <el-image :src="personForm.portrait_image" class="square"
                                    :preview-src-list="[personForm.portrait_image]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <div style="display: block; margin-left: 8px;font-size: 12px;">活体检测照片</div>
                            </div>
                        </div>

                        <div class="image_box">
                            <div style="width: 50%;">
                                <el-image :src="personForm.idcard_front_img" class="rectangle"
                                    :preview-src-list="[personForm.idcard_front_img]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <span class="demonstration">身份证人像面</span>
                            </div>
                            <div style="width: 50%;">
                                <el-image :src="personForm.idcard_back_img" class="rectangle"
                                    :preview-src-list="[personForm.idcard_back_img]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <span class="demonstration">身份证国徽面</span>
                            </div>
                        </div>

                        <div class="image_box">
                            <div style="width: 50%;">
                                <el-image :src="personForm.drivers_license_front_img" class="rectangle"
                                    :preview-src-list="[personForm.drivers_license_front_img]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <span class="demonstration">驾驶证正页</span>
                            </div>
                            <div style="width: 50%;">
                                <el-image :src="personForm.drivers_license_back_img" class="rectangle"
                                    :preview-src-list="[personForm.drivers_license_back_img]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <span class="demonstration">驾驶证副页</span>
                            </div>
                        </div>

                        <div class="image_box">
                            <div style="width: 50%;">
                                <el-image :src="personForm.car_front_license_img" class="rectangle"
                                    :preview-src-list="[personForm.car_front_license_img]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <span class="demonstration">行驶证印章页</span>
                            </div>
                            <div style="width: 50%;">
                                <el-image :src="personForm.car_back_license_img" class="rectangle"
                                    :preview-src-list="[personForm.car_back_license_img]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <span class="demonstration">行驶证条码页</span>
                            </div>
                        </div>

                        <div class="image_box">
                            <div style="width: 50%;">
                                <el-image :src="personForm.car_front_image" class="rectangle"
                                    :preview-src-list="[personForm.car_front_image]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <span class="demonstration">车头照片</span>
                            </div>
                            <div style="width: 50%;">
                                <el-image :src="personForm.transport_license" class="rectangle"
                                    :preview-src-list="[personForm.transport_license]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <span class="demonstration">车辆道路运输证</span>
                            </div>
                        </div>

                        <!-- <div style="margin-left: 20px;margin-top: 15px;">
                            <el-image :src="personForm.car_front_image" class="square"
                                :preview-src-list="[personForm.car_front_image]">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>

                            <span class="demonstration">车头照片</span>
                        </div> -->


                        <el-form-item label="提现账期：" prop="account_period">
                            <el-input v-model="personForm.account_period" :disabled="!is_edit" style="width: 180px;"
                                type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="信息费：" prop="info_amount">
                            <el-input v-model="personForm.info_amount" :disabled="!is_edit" style="width: 180px;"
                                type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="是否缴纳订金：" prop="is_deposit">
                            <el-radio-group v-model="personForm.is_deposit">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        
                        <!-- prop="road_line" -->
                        <!-- <el-form-item label="专线：" style="margin-top: 20px;">
                            <el-cascader filterable :show-all-levels="false" size="small" :props="props"
                                :options="provinceAndCityData_" v-model="personForm.road_line_code_txt"
                                @change="handleChange">
                            </el-cascader>
                        </el-form-item> -->


                    </el-form>
                </div>
                <!-- 企业认证 -->
                <div v-if="dialogInfo.type == 'enterprise'">
                    <el-form label-position="right" :inline="false" :rules="rules" :model="enterpriseForm"
                        ref="enterpriseForm" label-width="120px">
                        <div style="display: flex;">
                            <div style="width: 70%;">
                                <el-form-item label="法人姓名：" style="font-size: 12px;">
                                    {{ enterpriseForm.client_name }}
                                </el-form-item>
                                <el-form-item label="手机号：">
                                    {{ enterpriseForm.phone }}
                                </el-form-item>
                            </div>
                            <div style="width: 30%;">
                                <el-image :src="enterpriseForm.portrait_image" class="square"
                                    :preview-src-list="[enterpriseForm.portrait_image]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <span class="demonstration"
                                    style="display: block; margin-left: 8px;font-size: 12px;">活体检测照片</span>
                            </div>
                        </div>


    
                        <div class="image_box">
                            <div style="width: 50%;">
                                <el-image class="rectangle" :src="enterpriseForm.business_license"
                                    :preview-src-list="[enterpriseForm.business_license]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>

                                <span class="demonstration">营业执照</span>
                            </div>
                            <div style="width: 50%;">
                                <el-image :src="enterpriseForm.transport_license" class="rectangle"
                                    :preview-src-list="[enterpriseForm.transport_license]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <span class="demonstration">道路运输证</span>
                            </div>
                        </div>

                        <div style="margin-left: 0px;margin-top: 15px;">
                            <el-form-item label="企业名称：">
                                <span>{{ enterpriseForm.enterprise }}</span>
                            </el-form-item>
                            <!-- <el-form-item label="企业地址：">
                                <span>{{ enterpriseForm.enterprise_address }}</span>
                            </el-form-item> -->
                            <el-form-item label="统一社会信用代码：">
                                <span>{{ enterpriseForm.enterprise_code }}</span>
                            </el-form-item>
                        </div>

                        <el-form-item label="提现账期：" prop="account_period">
                            <el-input v-model="enterpriseForm.account_period" style="width: 180px;"
                                type="number"></el-input>
                        </el-form-item>
                        <!-- prop="road_line" -->
                        <!-- <el-form-item label="专线：" style="margin-top: 20px;">
                            <el-cascader filterable :show-all-levels="false" size="mini" :props="props"
                                :options="provinceAndCityData_" v-model="enterpriseForm.road_line_code_txt"
                                @change="handleChangeTwo">
                            </el-cascader>
                        </el-form-item> -->

                    </el-form>
                </div>
                <!-- 设置专线 -->
                <div v-if="dialogInfo.type == 'rode'">
                    <div style="font-size: 12px; font-weight: 600">专线：
                        <span v-for="(item, index) in roadForm.road_line" :key="index">
                            {{ item }}
                        </span>
                    </div>
                    <el-form label-position="right" :inline="false" :rules="rules" :model="roadForm" ref="roadForm"
                        label-width="80px">
                        <el-form-item label="设置专线：" prop="road_line_code_txt" style="margin-top: 25px;">
                            <el-cascader filterable :show-all-levels="false" size="small" :props="props"
                                :options="provinceAndCityData_" v-model="roadForm.road_line_code_txt"
                                @change="handleChange">
                            </el-cascader>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
        </page-dialog>
    </div>
</template>

<script>

import PageDialog from "@/components/PageDialog";
import PageFilter from "@/components/PageFilter/index";
import PageTable from "@/components/PageTable/index";
import { formatter } from "@/utils/index";
import axios from "axios"; //引入axios
import {
    getTakerList,// 列表
    getTakerParam,// 基础参数
    takerEnable,//启用/禁用
    takerDetail,// 详情
    takerChangeState,//通过/驳回
    getLocationData,//路线信息
    editModify,//修改接单人信息
    takerList,// 接单人筛选列表
} from '@/api/bill'
export default {
    name: "takerPage",
    components: {
        PageFilter,
        PageDialog,
        PageTable
    },
    data () {
        return {
            roadData: {},
            props: { multiple: true },
            cityList: [],
            id: 0,
            fullYear: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            loading: false,
            billLading: '',
            addId: [],
            dataText: "",
            showSummary: false,
            task_count: 0,
            settlement_time: "",
            is_edit: true,
            someCondition: false,
            client_status: 0,
            order_count_total: 0.00,
            order_amount_total: 0.00,
            remainder_msg: "",
            contentStyleObj: {
                height: "100%"
            },
            refresh: false,
            className: "forms",
            personForm: {
                pfid: "",
                real_name: "",//姓名
                phone: "",//手机号
                citizen_cardid: "",//身份证号
                car_number: "",//车牌号
                portrait_image: "",//活体检测照片
                idcard_front_img: "",
                idcard_back_img: "",
                car_back_license_img: "",
                car_front_license_img: "",
                car_front_image: "",
                account_period: "",
                road_line_code_txt: [],
                road_line: [],
                road_line_code: [],
                drivers_license_front_img: "",
                drivers_license_back_img: "",
                transport_license: "",
                pay_type: "",
                info_amount: 20,
                is_deposit: 1
            },
            roadForm: {
                pfid: "",
                road_line_code_txt: [],
                road_line: [],
                road_line_code: [],
            },
            rules: {
                road_line_code_txt: [
                    {
                        required: true,
                        trigger: ["blur", "change"],
                        message: "请填写司机常跑路线"
                    }
                ],
                account_period: [
                    {
                        required: true,
                        trigger: ["blur", "change"],
                        message: "请填写账期"
                    }
                ],
            },
            enterpriseForm: {
                pfid: "",
                client_name: "",//注册人姓名
                phone: "",//手机号
                client_citizen_cardid: "",//注册人身份证号
                portrait_image: "",//活体检测照片
                client_idcard_back_img: "",//注册人身份证
                client_idcard_front_img: "",//注册人身份证

                real_name: "",//法人
                citizen_cardid: "",//法人身份证
                idcard_front_img: "",
                idcard_back_img: "",
                enterprise: "",//企业名称
                enterprise_address: "",//企业地址
                enterprise_code: "",//统一社会信用代码
                business_license: "",//营业执照
                transport_license: "",//道路运输证
                account_period: "",
                road_line_code_txt: [],
                road_line: [],
                road_line_code: [],
            },

            service_staff_id: [],
            settlement_perio: [],
            // 相关列表
            listTypeInfo: {
                user_id: [],//发布企业
                status: [], //企业状态
                state: [],//认证状态
                //identity_type: [],//类型
            },

            // 弹窗相关
            dialogInfo: {
                width: "600px",
                title: {
                    person: "个人认证",
                    enterprise: "企业认证",
                    rode: '设置专线'
                },
                visible: false,
                type: "",
                btLoading: false,
                btList: [
                    // {
                    //     label: "驳回",
                    //     event: "reject",
                    //     show: true
                    // },
                    {
                        label: "通过",
                        type: "primary",
                        event: "save",
                        show: true
                    }
                ],
                // btList2: [
                //     {
                //         label: "取消",
                //         event: "close",
                //         show: true
                //     },
                //     {
                //         label: "确定",
                //         type: "primary",
                //         event: "edit",
                //         show: true
                //     },
                // ],
                btList2: [
                    {
                        label: "关闭",
                        event: "close",
                        show: true
                    },
                ],
                btList3: [
                    {
                        label: "取消",
                        event: "close",
                        show: true
                    },
                    {
                        label: "确定修改",
                        type: "primary",
                        event: "editRoad",
                        show: true
                    },
                ]
            },
            // 过滤相关配置
            filterInfo: {
                query: {
                    page: 1,
                    limit: 20,
                    pfid: "",
                    status: "",
                    pfid: "",
                    state: 20,
                    identity_type: 1,
                    road_line_code: "",
                    phone: "",
                },
                list: [
                    {
                        type: "select",
                        label: "司机",
                        value: "pfid",
                        list: "user_id",
                        key: "司机",
                        clearable: true
                    },
                    {
                        type: "input",
                        label: "电话",
                        value: "phone",
                        key: "电话",
                        clearable: true
                    },
                    {
                        type: "select",
                        label: "用户状态",
                        value: "status",
                        list: "status",
                        key: "用户状态"
                    },
                    {
                        type: "select",
                        label: "认证状态",
                        value: "state",
                        list: "state",
                        key: "认证状态"
                    },
                    // {
                    //     type: "select",
                    //     label: "类型",
                    //     value: "identity_type",
                    //     list: "identity_type",
                    //     key: "类型"
                    // },
                    {
                        type: "cascader",
                        label: "专线",
                        value: "road_line_code",
                        key: "专线",
                        clearable: true
                    },
                    {
                        type: "button",
                        label: "搜索",
                        btType: "primary",
                        event: "search",
                        show: true
                    },
                    {
                        type: "button",
                        label: "重置",
                        event: "reset",
                        show: true
                    }
                ]
            },
            // 分页参数
            pageParm: {
                tableHeight: "52vh", // 表格最大高度
                total: 0, // 总条数
                loading: true, // 加载动画
                pagesizes: [20, 50, 100], // 分页数量列表
                query: {
                    // 查询条件
                    page: 1, // 当前页
                    limit: 20 // 每页条数
                }
            },
            // 表格相关
            tableInfo: {
                refresh: 1,
                initCurpage: 1,
                data: [],
                fieldList: [
                    { label: "司机", value: "real_name", width: "100px", fixed: true },
                    { label: "联系电话", value: "phone", width: "110px", fixed: true },
                    { label: "身份证号", value: "citizen_cardid", type: "popover" },
                    { label: "账号状态", value: "status_txt", width: "80px" },
                    //{ label: "类型", value: "identity_type", width: "100px", type: "slot" },
                    { label: "认证状态", value: "state", width: "100px", type: "slot" },
                    { label: "支付状态", value: "payment_status_txt", width: "100px" },
                    { label: "保证金", value: "certification_amount", width: "100px" },
                    { label: "接单数", value: "order_count", width: "100px" },
                    { label: "运费数", value: "order_amount", width: "100px", type: "slot" },
                    { label: "账期", value: "account_period", width: "100px", type: "slot" },
                    { label: "认证时间", value: "auth_time", width: "130px" },
                    { label: "注册时间", value: "add_time", width: "130px" },
                    { label: "专线", value: "road_line", width: "100px", type: "slot" },
                ],
                handle: {
                    label: "操作",
                    width: "200px",
                    btList: [
                        {
                            label: "查看与修改 | ",
                            type: "text",
                            //icon: "el-icon-browse",
                            event: "detail",
                            show: true,
                            ifRender: row => {
                                if (row.identity_type == 0) {
                                    return false;
                                } else {
                                    return true;
                                }
                            }
                        },
                        {
                            label: "  禁用",
                            type: "text",
                            //icon: "el-icon-browse",
                            event: "un_enable",
                            show: true,
                            ifRender: row => {
                                if (row.status == 1) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        },
                        {
                            label: " 启用",
                            type: "text",
                            //icon: "el-icon-browse",
                            event: "enable",
                            show: true,
                            ifRender: row => {
                                if (row.status == 0) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        },
                    ]
                },
            }
        };
    },
    created () {

        //this.getonemonth();
        this.init({ ...this.pageParm.query, ...this.filterInfo.query });
        this.getParamList();
        // this.getHeight();
        this.fetTableHeight()
        this.upenter();
        this.getCityList()
        //window.addEventListener("resize", this.getHeight);
    },
    //enter事件 与点击查询按钮功能一致
    updated () {
        var that = this;
    },
    activated () {
        this.init(this.filterInfo.query);
        this.getParamList();
        this.upenter();
        this.refresh = false;
    },
    deactivated () {
        this.refresh = true;
    },
    filters: {
        formatter (time) {
            let date = new Date(time),
                text = "";
            if (time !== "") return (text = formatter(date, "yyyy-MM"));
            return text;
        }
    },
    computed: {
        provinceAndCityData_: function () {
            let cityList = JSON.parse(JSON.stringify(this.cityList))
            // cityList.forEach((v, i) => {
            //     if (v.label.includes('省')) {
            //         let item = {
            //             label: '全' + v.label,
            //             value: v.value,
            //             children: undefined,
            //             disabled: false
            //         }
            //         v.children.unshift(item)
            //     }
            // })
            // cityList.unshift({
            //     "value": "0",
            //     "label": "全国",
            //     disabled: false
            // })
            return cityList
        }
    },
    mounted () {
        // 通过遮罩层关闭图片预览
        document.addEventListener('click', function (e) {
            if (e.target.className == "el-image-viewer__mask") {
                let close = document.querySelector(".el-icon-circle-close");
                close.click();
            }
        });
    },

    methods: {
        changeService (data) {
            if (data) {
                this.groupForm.service_staff_id = data.id;
                this.groupForm.service_staff = data.value;
            } else {
                this.groupForm.service_staff_id = "";
                this.groupForm.service_staff = "";
            }
        },
        getCityList () {
            getLocationData().then(res => {
                console.log('我是路线信息', res);

                this.cityList = res.data
            })
            console.log('111', this.cityList);

        },
        rodeDetail (item) {
            this.someCondition = true
            this.is_edit = false;
            this.roadData = item
            let formData = new FormData();
            formData.append('pfid', item.pfid);
            takerDetail(formData).then(res => {
                if (res.status == 200 && typeof (res.data) == 'object') {

                    this.roadForm = res.data
                    if (this.roadForm.road_line_code_txt) {
                        this.roadForm.road_line = this.roadForm.road_line.split(';')
                        this.roadForm.road_line_code_txt = JSON.parse(this.roadForm.road_line_code_txt)
                        // console.log(this.roadForm.road_line_code_txt, '111111');
                        // this.roadForm.road_line_code = this.roadForm.road_line_code.split(',')


                    }
                    this.dialogInfo.width = "600px";
                    this.dialogInfo.type = "rode";
                    this.dialogInfo.visible = true;
                    // console.log(this.personForm.road_line_code_txt);
                } else {
                    // this.$message.error(res.data);
                    this.$message.error('无认证信息不可修改专线！');

                }
            })
            // console.log(this.roadForm, 'wjsfhjdshf');


        },
        handleChange (e) {
            console.log('road_line_code_txt>>>>>>>>>>>', this.roadForm.road_line_code_txt)
            this.roadForm.road_line_code = []
            this.roadForm.road_line_code_txt.forEach(item => {
                if (item[0] == 0) {
                    this.roadForm.road_line_code.push(item[0])
                } else {
                    this.roadForm.road_line_code.push(item[1])
                }
            })
            console.log('road_line_code>>>>>>>>>>>', this.roadForm.road_line_code)
            this.roadForm.road_line = []
            this.roadForm.road_line_code.forEach(v => {
                if (v == 0) {
                    this.roadForm.road_line.push('全国')
                } else {
                    this.provinceAndCityData_.forEach(item => {
                        if (item.children) {
                            item.children.forEach(innerItem => {
                                if (innerItem.value == v) {
                                    this.roadForm.road_line.push(innerItem.label)
                                }
                            })
                        }
                    })
                }
            })
            console.log('road_line>>>>>>>>>>>', this.roadForm.road_line)
        },
        handleChangeTwo (e) {
            console.log('road_line_code_txt>>>>>>>>>>>', this.enterpriseForm.road_line_code_txt)
            this.enterpriseForm.road_line_code = []
            this.enterpriseForm.road_line_code_txt.forEach(item => {
                if (item[0] == 0) {
                    this.enterpriseForm.road_line_code.push(item[0])
                } else {
                    this.enterpriseForm.road_line_code.push(item[1])
                }
            })
            console.log('road_line_code>>>>>>>>>>>', this.enterpriseForm.road_line_code)
            this.enterpriseForm.road_line = []
            this.enterpriseForm.road_line_code.forEach(v => {
                if (v == 0) {
                    this.enterpriseForm.road_line.push('全国')
                } else {
                    this.provinceAndCityData_.forEach(item => {
                        if (item.children) {
                            item.children.forEach(innerItem => {
                                if (innerItem.value == v) {
                                    this.enterpriseForm.road_line.push(innerItem.label)
                                }
                            })
                        }
                    })
                }
            })
            console.log('road_line>>>>>>>>>>>', this.enterpriseForm.road_line)
        },
        upload (param) {
            let file = param.file
            this.loading = true
            let formData = new FormData();
            formData.append("file", file);
            let config = {
                headers: {
                    //添加请求头
                    "Content-Type": "multipart/form-data",
                    "Authori-zation": "Bearer " + localStorage.getItem('token')
                }
            };
            let url = '/api' + '/xhy/admin/uploadFile'
            axios.post(url, formData, config).then(res => {
                this.loading = false
                if (res.status == 200) {
                    this.groupForm.business_license = res.data.data.href
                }

            }).catch(response => {
                this.loading = false
                console.log('图片上传失败')
            })
            const isLt2M = file.size / 1024 / 1024 < 4;

            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 4MB!');
            }
            return isLt2M;
        },
        //合计
        getSummaries (param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 1) {
                    sums[index] = "合计：";
                    return;
                }
                if (index === 8) {
                    sums[index] = this.order_count_total;
                    return;
                }
                if (index === 9) {
                    sums[index] = this.order_amount_total;
                    return;
                }

            });
            this.$nextTick(() => {
                this.$refs.table.$refs.table.doLayout();
                this.$refs.table.$refs.table.bodyWrapper.scrollLeft = 0;
            });
            return sums;
        },
        handleClose (tag) {
            this.relationMixedCost.splice(this.relationMixedCost.indexOf(tag), 1);
        },
        unique (arr) {
            const res = new Map();
            return arr.filter(a => !res.has(a) && res.set(a, 1));
        },
        arrayAminusB (arrA, arrB) {
            return arrA.filter(v => !arrB.includes(v));
        },
        //enter 事件防止全局触发
        upenter () {
            var that = this;
            document.onkeydown = e => {
                //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
                if (e.keyCode === 13 && e.target.baseURI.match("receivableVerification") && !that.showInvoice && !that.showReconciliation && !that.showDestroy && !that.dialogInfo.visible) {
                    console.log("回车事件", that.dialogInfo.visible);
                    //回车后执行搜索方法
                    that.filterInfo.query.page = 1;
                    that.pageParm.query.page = 1;
                    that.init(that.filterInfo.query);
                }
            };
        },
        openWind () {
        },
        openFile (img) {
            window.open(img, "_blank");
        },
        getHeight () {
            if (this.contentStyleObj.height == "100%") {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 150;
            } else {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 146;
            }
            this.pageParm.tableHeight = height + "px";
        },
        // 重置table高度
        resetHeight () {
            return new Promise((resolve, reject) => {
                this.tableH = 0
                resolve()
            })
        },
        // 设置table高度
        fetTableHeight () {
            this.resetHeight().then(res => {
                this.pageParm.tableHeight = this.$refs.tableWrapper.getBoundingClientRect().height - 64
                // 设置最小高度，确保表格可以正常显示
                // this.tableH = Math.max(containerHeight - 10, 200); // 最小300px
            })
        },
        //获取本月月初 月末
        // getonemonth() {
        //   var nowDate = new Date();
        //   var fullYear = nowDate.getFullYear();
        //   var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
        //   var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天

        //   this.settlement_time =  nowDate.getFullYear() + "-" + (nowDate.getMonth() + 1);
        //   this.filterInfo.query.settlement_time =  nowDate.getFullYear();
        // },
        //格式化年月日
        getFullDate (targetDate) {
            var D, y, m, d;
            if (targetDate) {
                D = new Date(targetDate);
                y = D.getFullYear();
                m = D.getMonth() + 1;
                d = D.getDate();
            } else {
                y = fullYear;
                m = month;
                d = date;
            }
            m = m > 9 ? m : "0" + m;
            d = d > 9 ? d : "0" + d;
            return y + "-" + m + "-" + d;
        },
        init (data) {
            this.loading = true;
            if (data.road_line_code.length != 0) {
                if (data.road_line_code[0] == 0) {
                    data.road_line_code = 0
                } else if (data.road_line_code.length == 2) {
                    data.road_line_code = data.road_line_code[1]
                } else {

                }
            } else {
                data.road_line_code = ''
            }
            let formData = new FormData();
            formData.append('pfid', data.pfid);
            formData.append('phone', data.phone);
            formData.append('status', data.status);
            formData.append('state', data.state);
            formData.append('identity_type', data.identity_type);
            formData.append('page', data.page);
            formData.append('limit', data.limit);
            formData.append('road_line_code', data.road_line_code);
            console.log('我是路线code22222', data.road_line_code);
            getTakerList(formData).then(res => {
                this.showSummary = true;
                this.tableInfo.data = [];
                this.tableInfo.data = res.data.data;
                if (this.tableInfo.data.length === 0) {
                    this.dataText = "暂无数据";
                    this.order_count_total = res.data.other.order_count_total;
                    this.order_amount_total = res.data.other.order_amount_total;
                }
                this.pageParm.total = res.data.page.total;
                this.order_count_total = res.data.other.order_count_total;
                this.order_amount_total = res.data.other.order_amount_total;

                this.loading = false;
            });

        },


        getCurrentDate () {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        getCurrentMonth () {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            return `${year}-${month}`;
        },

        getParamList () {
            let formData = new FormData();
            formData.append('identity_type', 1);
            getTakerParam(formData).then(res => {
                let {
                    user_id,
                    status,
                    state,
                    //identity_type
                } = res.data;

                user_id = user_id.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });

                status = status.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                state = state.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                // identity_type = identity_type.map(v => {
                //     return {
                //         key: v.value,
                //         value: v.name
                //     };
                // });

                this.listTypeInfo.user_id = user_id;
                this.listTypeInfo.status = status;
                this.listTypeInfo.state = state;
                //this.listTypeInfo.identity_type = identity_type;
            });

        },

        handleClick (event, data) {
            console.log(event, data);
            console.log('当前事件---', data)
            switch (event) {
                case "enable":
                    this.$confirm("确定启用吗？启用之后该司机将可以正常接单", "启用", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            let formData = new FormData();
                            formData.append('pfid', data.pfid)
                            formData.append('status', 1)

                            takerEnable(formData)
                                .then(res => {
                                    if (res.status == 200) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success"
                                        });
                                        this.init(this.filterInfo.query);
                                    }
                                })
                                .catch(() => { });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消启用"
                            });
                        });
                    break;
                case "un_enable":
                    this.$confirm("确定禁用吗？禁用之后该司机将无法正常接单", "禁用", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            let formData = new FormData();
                            formData.append('pfid', data.pfid)
                            formData.append('status', 0)

                            takerEnable(formData)
                                .then(res => {
                                    if (res.status == 200) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success"
                                        });
                                        this.init(this.filterInfo.query);
                                    }
                                })
                                .catch(() => { });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消禁用"
                            });
                        });
                    break;
                case "detail":
                    if (data.state == 30) {
                        this.is_edit = false;
                        this.someCondition = false;
                    } else {
                        this.is_edit = true;
                    }
                    if (data.identity_type == 1) {
                        let formData = new FormData();
                        formData.append('pfid', data.pfid);

                        takerDetail(formData).then(res => {
                            if (res.status == 200) {
                                this.dialogInfo.type = 'person'
                                this.dialogInfo.visible = true
                                this.personForm = res.data
                                if (this.is_edit === true) this.personForm.info_amount = 20
                                if (this.personForm.road_line_code_txt) {
                                    this.personForm.road_line = this.personForm.road_line.split(';')
                                    this.personForm.road_line_code_txt = JSON.parse(this.personForm.road_line_code_txt)
                                    this.personForm.road_line_code = this.personForm.road_line_code.split(',')
                                } 
                                // console.log(this.personForm.road_line_code_txt);

                            } else {
                                this.$message.error(res.msg);
                            }
                        })


                    } else {
                        let formData = new FormData();
                        formData.append('pfid', data.pfid);

                        takerDetail(formData).then(res => {
                            if (res.status == 200) {
                                console.log('返回的详情数据---', res.data)
                                this.dialogInfo.type = 'enterprise'
                                this.dialogInfo.visible = true
                                this.enterpriseForm = res.data
                                this.client_status = res.data.client_status
                                if (this.personForm.road_line_code_txt) {
                                    this.personForm.road_line = this.personForm.road_line.split(';')
                                    this.personForm.road_line_code_txt = JSON.parse(this.personForm.road_line_code_txt)
                                    this.personForm.road_line_code = this.personForm.road_line_code.split(',')
                                }
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }
                    break;
                case "search":
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    this.init(this.filterInfo.query);
                    break;
                case "reset":
                    for (let i in this.filterInfo.query) {
                        this.filterInfo.query[i] = "";
                    }
                    this.filterInfo.query.state = 20;
                    this.filterInfo.query.identity_type = 1;
                    this.filterInfo.query.page = 1;
                    this.filterInfo.query.limit = 20;
                    this.pageParm.query.page = 1;
                    this.pageParm.query.limit = 20;
                    let datas = {};
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                case "save":
                    this.dialogInfo.btLoading = false;
                    let formData = new FormData();
                    if (this.dialogInfo.type == 'person') {
                        formData.append('pfid', this.personForm.pfid)
                        formData.append('state', 30)
                        formData.append('account_period', this.personForm.account_period)
                        formData.append('is_deposit', this.personForm.is_deposit)
                        formData.append('info_amount', this.personForm.info_amount)
                        if (this.personForm.pay_type == 0) this.remainder_msg = "司机未缴纳保证金，确认通过审核？"
                        else this.remainder_msg = "确认通过审核？"
                    } else {
                        formData.append('pfid', this.enterpriseForm.pfid)
                        formData.append('state', 30)
                        formData.append('account_period', this.enterpriseForm.account_period)
                    }

                    this.$confirm(`${this.remainder_msg}`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            takerChangeState(formData)
                                .then(res => {
                                    if (res.status == 200) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success"
                                        });
                                        this.dialogInfo.visible = false
                                        this.remainder_msg = ""
                                        this.init(this.filterInfo.query);
                                    }
                                })
                                .catch(() => { });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消"
                            });
                        });


                    // takerChangeState(formData).then(res => {
                    //     if (res.status == 200) {
                    //         this.$message({
                    //             message: res.msg,
                    //             type: "success"
                    //         });
                    //         this.dialogInfo.visible = false
                    //         this.init(this.filterInfo.query);
                    //     }
                    // })
                    break;
                case "edit":
                    this.dialogInfo.btLoading = false;
                    let flag = false
                    this.$refs.personForm.validate((valid) => {
                        if (valid) {
                            // alert('submit!');
                            flag = true
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                    formData = new FormData();
                    if (this.dialogInfo.type == 'person') {
                        formData.append('pfid', this.personForm.pfid)
                        formData.append('account_period', this.personForm.account_period)
                        // formData.append(`road_line_code_txt`, JSON.stringify(this.personForm.road_line_code_txt))
                        // const roadLineString = this.personForm.road_line.join(';')
                        // formData.append(`road_line`, roadLineString)
                        // formData.append(`road_line_code`, JSON.stringify(this.personForm.road_line_code))
                    }
                    if (flag) {
                        editModify(formData).then(res => {
                            if (res.status == 200) {
                                this.$message({
                                    message: res.msg,
                                    type: "success"
                                });
                                this.dialogInfo.visible = false
                                this.init(this.filterInfo.query);
                            }
                        })
                    }
                    break;
                case "editRoad":
                    this.dialogInfo.btLoading = false;
                    let flags = false
                    this.$refs.roadForm.validate((valid) => {
                        if (valid) {
                            // alert('submit!');
                            flags = true
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                    let formDatas = new FormData();
                    if (this.dialogInfo.type == 'rode') {
                        formDatas.append('pfid', this.roadForm.pfid)
                        formDatas.append(`road_line_code_txt`, JSON.stringify(this.roadForm.road_line_code_txt))
                        const roadLineString = this.roadForm.road_line.join(';')
                        formDatas.append(`road_line`, roadLineString)
                        formDatas.append(`road_line_code`, JSON.stringify(this.roadForm.road_line_code))
                    }
                    if (flags) {
                        editModify(formDatas).then(res => {
                            if (res.status == 200) {
                                this.$message({
                                    message: res.msg,
                                    type: "success"
                                });
                                this.dialogInfo.visible = false
                                this.init(this.filterInfo.query);
                            }
                        })
                    }
                    break;
                case "reject":
                    this.dialogInfo.btLoading = false;
                    let formData2 = new FormData();
                    if (this.dialogInfo.type == 'person') {
                        formData2.append('pfid', this.personForm.pfid)
                        formData2.append('state', 10)
                        formData2.append('account_period', this.personForm.account_period)
                    } else {
                        formData2.append('pfid', this.enterpriseForm.pfid)
                        formData2.append('state', 10)
                        formData2.append('account_period', this.enterpriseForm.account_period)
                    }

                    takerChangeState(formData2).then(res => {
                        if (res.status == 200) {
                            this.$message({
                                message: res.msg,
                                type: "success"
                            });
                            this.dialogInfo.visible = false
                            this.init(this.filterInfo.query);
                        }
                    })
                    break;
                case "close":
                    this.dialogInfo.btLoading = false;
                    this.dialogInfo.visible = false;
                    break;
            }
        },
        handleEvent (event, data, label) {
            let datas = {};
            switch (event) {
                case "tableCheck":
                    this.addId = [];
                    if (this.addId.length > 0) this.isBill = false
                    else this.isBill = true
                    data.forEach(v => {
                        this.addId.push(v.id);
                    });
                    break;
                case "rowClick":
                    break;
                case "remoteSearch":
                    let formData = new FormData();
                    formData.append('real_name', data);
                    formData.append('identity_type', 1);
                    takerList(formData).then(res => {
                        let {
                            user_id,
                        } = res.data;
                        user_id = user_id.map(v => {
                            return {
                                key: v.value,
                                value: v.name
                            };
                        });
                        this.listTypeInfo.user_id = user_id;
                    });
                    break;
                case "search":
                    console.log('333333')
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    this.init(this.filterInfo.query);
                    break;
                // 分页改变当前页
                case "curPage":
                    if (!data) return;
                    this.pageParm.query.page = data;
                    this.filterInfo.query.page = data;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                // 分页列表
                case "pageSize":
                    if (!data) return;
                    this.pageParm.query.limit = data;
                    this.filterInfo.query.limit = data;
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                default:
                    break;
            }
        },
    },
    // destroyed () {
    //     window.removeEventListener("resize", this.getHeight);
    // }
};
</script>
<style lang="scss">
.taskList_box_title {
    padding-bottom: 20px;
    line-height: 40px;
}

.taskList_box {
    width: 600px;
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ddd;
    margin-right: -10px;
    border: 1px solid #ddd;
    line-height: 47px;
    width: 623px;

    .el-col {
        height: 60px;
        line-height: 40px;
        padding: 10px 0;

        .el-input-number {
            width: 140px;
        }
    }
}

/* 去掉input尾部上下小箭头 start */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    -o-appearance: textfield;
    -ms-appearance: textfield;
    appearance: textfield;
}

.image_box {
    display: flex;
    margin-top: 15px;
    margin-left: 20px;
}

.square {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: 100px;
    height: 100px;
}

.rectangle {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: 150px;
    height: 105px;
}

.demonstration {
    display: block;
    margin-left: 32px;
    font-size: 12px;
    padding-top: 4px;
}

.image-slot {
    text-align: center;
    line-height: 100px;
}

/* 去掉input尾部上下小箭头 end */
</style>
<style lang="scss" scoped>
::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: 60px;
    min-height: 60px;
}

.icon-box {
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;

    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        color: #fff;
    }
}


.filtrate {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background-color: #409eff;
    color: #ffffff;
    box-shadow: -1px 1px 4px 0 #f6900f;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2;
}

.filtrate:hover {
    cursor: pointer;
}

::v-deep .receivable {
    margin-left: 33px;
}

::v-deep .moneycss {
    width: 120px;
}

.editicon:hover {
    cursor: pointer;
}

.imgggcss {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.excelcss:hover {
    cursor: pointer;
}

::v-deep .excelcss>.el-image__inner {
    vertical-align: middle;
}

.salecss {
    white-space: nowrap;
    /*强制span不换行*/
    display: inline-block;
    /*将span当做块级元素对待*/
    width: 60px;
    /*限制宽度*/
    overflow: hidden;
    /*超出宽度部分隐藏*/
    text-overflow: ellipsis;
    /*超出部分以点号代替*/
    line-height: 0.9;
    /*数字与之前的文字对齐*/
}

.salecss:hover {
    cursor: pointer;
}

.recordTable {
    display: flex;
    flex-direction: column;
}

.concatcss {
    padding-top: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
    position: relative;
    margin-top: 10px;
}

.concatcss_line {
    width: 360px;
    border: 1px dashed #c8b9b9;
}

::v-deep.el-form-item {
    margin-bottom: 0px;

}

::v-deep .el-form-item--medium .el-form-item__label {
    font-size: 12px;
}

::v-deep .el-form-item--medium .el-form-item__content {
    font-size: 12px;
}

::v-deep.concatcss>.el-form-item>.el-form-item__label {
    font-size: 12px !important;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-input>.el-input__inner {
    font-size: 12px !important;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-input>.el-input__inner,
.concatcss>.el-form-item>.el-form-item__content {
    height: 30px !important;
    line-height: 30px;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-select>.el-input>.el-input__inner,
.el-form-item__content>.filter-input>.el-input__inner {
    width: 200px;
    height: 30px;
    font-size: 12px !important;
}

.moredestroyCss {
    ::v-deep.el-form-item {
        margin-bottom: 20px !important;

    }

    ::v-deep .el-input {
        width: 240px !important;
    }

    ::v-deep .el-input__inner {
        width: 240px !important;
    }

    .item {
        width: 330px;
        margin-top: 15px;

        &-title {
            font-size: 13px;
            color: #9BA2AA;
            padding-left: 15px;
            padding-bottom: 5px;
        }

        &-main {
            padding: 10px 15px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px dashed #000;

            &-line {
                display: flex;
                align-items: center;
                height: 40px;
                line-height: 40px;
            }

            &-title {
                width: 80px;
                color: #606266;
                font-size: 12px;
                font-weight: 700;

            }

            &-box {
                font-size: 12px;
                color: #606266;

                ::v-deep .el-input__inner {
                    width: 200px !important;
                }

                ::v-deep .el-input {
                    width: 200px !important;
                }
            }
        }
    }
}

.bgfff {
    background: #fff;
    flex: 1;
}

.bgfffs {
    background: #fff;
}

.tableHeight {
    flex: 1;
    box-sizing: border-box;
}

.filter_box {
    position: relative;
    // height: 64px;
    overflow: hidden;
    padding-right: 90px;

    .open {
        position: absolute;
        top: 10px;
        right: 20px;
        color: #409EFF;
        cursor: pointer;
    }
}

.app-main {
    padding-top: 90px !important;
}

.container-box {
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

::v-deep .pagination-container {
    margin-top: 0 !important;
}

.addicon {
    color: #409eff;
    font-size: 20px;
    vertical-align: middle;
}

.addicon:hover {
    cursor: pointer;
}

.soltInfos {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.soltInfo {
    width: 80px;
    /* 设置容器高度为 80px */
    overflow: hidden;
    /* 隐藏超出部分 */
    white-space: nowrap;
    /* 不换行 */
    text-overflow: ellipsis;
    /* 超出部分用省略号表示 */
}
</style>